<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>参数列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片区域 -->
		<el-card>
			<!-- 警告栏 -->
			<el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon :closable="false"></el-alert>
			<!-- 选择商品分类 -->
			<el-row class="mgtop">
				<el-col>
					<span>选择商品分类：</span>
					<el-cascader v-model="selectedKeys" :props="cateProps" :options="cateList" expandTrigger="hover" @change="handleChange">
					</el-cascader>
				</el-col>
			</el-row>
			<!-- 页签区域 -->
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="动态参数" name="many">
					<el-button type="primary" :disabled="isBtnDisabled" @click="addParamsDialogVisible = true">添加参数</el-button>
					<!-- 动态参数表格区域 -->
					<el-table :data="manyTableData" border stripe>
						<!-- 展开列 -->
						<el-table-column type="expand">
							<template slot-scope="scope">
								<!-- 循环渲染tag标签 -->
								<el-tag v-for="(item,index) in scope.row.attr_vals" :key="index.item" closable @close="handleClose(index,scope.row)">{{item}}</el-tag>
								<!-- 输入的文本框 -->
								<el-input	class="input-new-tag" v-if="scope.row.inputVisible"	v-model="scope.row.inputValue"	ref="saveTagInput"	size="small"	@keyup.enter.native="handleInputConfirm(scope.row)"	@blur="handleInputConfirm(scope.row)">
								</el-input>
								<!-- 添加的按钮 -->
								<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
							</template>
						</el-table-column>
						<!-- 索引列 -->
						<el-table-column type="index" label="#"></el-table-column>
						<el-table-column label="参数名称" prop="attr_name"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="primary" icon="el-icon-edit" size="mini" @click="editParamsClick(scope.row)">修改</el-button>
								<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteParams(scope.row.attr_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="静态属性" name="only">
					<el-button type="primary" :disabled="isBtnDisabled" @click="addParamsDialogVisible = true">添加属性</el-button>
					<!-- 静态属性表格区域 -->
					<el-table :data="onlyTableData" border stripe>
						<!-- 展开列 -->
						<el-table-column type="expand">
							<template slot-scope="scope">
								<!-- 循环渲染tag标签 -->
								<el-tag v-for="(item,index) in scope.row.attr_vals" :key="index.item" closable @close="handleClose(index,scope.row)">{{item}}</el-tag>
								<!-- 输入的文本框 -->
								<el-input	class="input-new-tag" v-if="scope.row.inputVisible"	v-model="scope.row.inputValue"	ref="saveTagInput"	size="small"	@keyup.enter.native="handleInputConfirm(scope.row)"	@blur="handleInputConfirm(scope.row)">
								</el-input>
								<!-- 添加的按钮 -->
								<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
							</template>
						</el-table-column>
						<!-- 索引列 -->
						<el-table-column type="index" label="#"></el-table-column>
						<el-table-column label="参数名称" prop="attr_name"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="primary" icon="el-icon-edit" size="mini" @click="editParamsClick(scope.row)">修改</el-button>
								<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteParams(scope.row.attr_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</el-card>
		<!-- 添加属性的对话框（动静态公用） -->
		<el-dialog :title="'添加' + titleText" :visible.sync="addParamsDialogVisible" width="50%" @close="addParamsInfoClose">
			<el-form :model="addParamsInfo" :rules="addParamsInfoRules" ref="addParamsInfoRef" label-width="100px">
				<el-form-item :label="titleText" prop="attr_name">
					<el-input v-model="addParamsInfo.attr_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addParamsDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addParams">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑修改参数信息的对话框 -->
				<el-dialog :title="'修改' + titleText" :visible.sync="editParamsDialogVisible" width="50%" @close="editParamsInfoClose">
				<el-form :model="editParamsInfo" :rules="editParamsInfoRules" ref="editParamsInfoRef" label-width="100px">
					<el-form-item :label="titleText" prop="attr_name">
						<el-input v-model="editParamsInfo.attr_name"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="editParamsDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editParams">确 定</el-button>
				</span>
			</el-dialog>
	</div>
</template>

<script>
export default {
	data(){
		return {
			// 商品分类数据
			cateList:[],
			// 接收级联选择的分类id数组
			selectedKeys:[],
			// 级联选择器的关联配置props
			cateProps:{
				label:'cat_name',
				value:'cat_id',
				children:'children'
			},
			// tab栏当前的选择(此处改成many或者only方便数据接收)
			activeName:'many',
			// 保存动态参数列表信息
			manyTableData:[],
			// 保存静态属性列表信息
			onlyTableData:[],
			// 添加参数的数据存储
			addParamsInfo:{
				// 参数名称：
				attr_name:'',
			},
			// 控制添加参数对话框的显示和隐藏
			addParamsDialogVisible:false,
			// 添加动态参数/静态属性的规则
			addParamsInfoRules:{
				attr_name:[
					{required: true,message: '请输入参数名称',trigger: 'blur'}
				]
			},
			// 控制编辑属性对话框的显示和隐藏
			editParamsDialogVisible:false,
			// 保存编辑属性时根据id查询到的数据
			editParamsInfo:{},
			// 编辑动态参数/静态属性的规则
			editParamsInfoRules:{
				attr_name:[
					{required: true,message: '请输入参数名称',trigger: 'blur'}
				]
			},
			// // 控制按钮和文本框的切换显示
			// inputVisible:false,
			// 接收文本框的输入值
			// inputValue:''
		}
	},
	created(){
		this.getCateList()
	},
	methods:{
		// 获取商品分类数据
		async getCateList(){
			const {data: res} = await this.$http.get('categories')
			if(res.meta.status !== 200){
				return this.$message.error('获取商品分类失败')
			}
			this.cateList = res.data
			// console.log(this.cateList);
		},
		// 级联选择器选择后触发的函数
		handleChange(){
			// 成功勾选后发送数据请求
			this.getParamsData()
		},
		// 点击tab栏时触发的函数
		handleClick(){
			// 切换tab栏时也要获取数据
			this.getParamsData()
		},
		// 获取参数列表数据
		async getParamsData(){
			// 如果没有选中三级分类，则不发送请求,且选择框清空
			if(this.selectedKeys.length !== 3){
				this.selectedKeys = []
			// 如果切换后没有三级标题，则应该清空下面的列表数据
				this.manyTableData = []
				this.onlyTableData = []
				return
			}
			const {data: res} = await this.$http.get(`categories/${this.cateId}/attributes`,{
				params:{ sel: this.activeName}
			})
			if(res.meta.status !== 200){
				return this.$message.error('获取参数列表失败')
			}
			// 把attr_vals字符串格式转为数组，用于遍历展示
			res.data.forEach(item => {
				// 做下判断，如果attr_vals本身就是空的，就直接返回空数组，防止转换时产生空tag
				item.attr_vals = item.attr_vals ? item.attr_vals.split(",") : []
				// 由于下面要用到文本框和按钮切换显示如果放在全局会导致所有的文本框和按钮同步，因此加到数据内部，不同作用域:控制文本框和按钮的显示
				item.inputVisible = false
				// 文本输入框内容也加到数据内部中
				item.inputValue = ''
			});
			console.log(res.data);
			// console.log(res.data);
			// 根据this.activeName分别保存动态和静态
			if(this.activeName === 'many'){
				this.manyTableData = res.data
				console.log(this.manyTableData);
			}else{
				this.onlyTableData = res.data
				console.log(this.onlyTableData);
			}
		},
		// 监听添加属性对话框关闭事件
		addParamsInfoClose(){
			// 重置数据
			this.$refs.addParamsInfoRef.resetFields()
		},
		// 点击确定，添加参数
		addParams(){
			this.$refs.addParamsInfoRef.validate(async valid => {
				// console.log(valid);
				if(!valid) return
				// 预校验成功，发送请求
				const {data: res} = await this.$http.post(`categories/${this.cateId}/attributes`,{
					attr_name:this.addParamsInfo.attr_name,
					attr_sel:this.activeName
				})
				if(res.meta.status !== 201){
					return this.$message.error('参数添加失败')
				}
				this.addParamsDialogVisible = false
				this.$message.success('参数添加成功')
				this.getParamsData()
			})
		},
		// 监听点击编辑，弹出编辑对话框事件
		async editParamsClick(row){
			// 获取编辑的属性信息
			const {data: res} = await this.$http.get(`categories/${row.cat_id}/attributes/${row.attr_id}`,{
				params:{attr_sel:this.activeName}
			})
			if(res.meta.status !== 200){
				return this.$message.error('获取属性信息失败')
			}
			// 显示对话框
			this.editParamsDialogVisible = true
			this.editParamsInfo = res.data
		},
		// 监听关闭编辑属性对话框的事件
		editParamsInfoClose(){
			setTimeout(() => {
				this.$refs.editParamsInfoRef.resetFields()
			},500) 
		},
		// 点击确定，完成修改属性事件
		editParams(){
			this.$refs.editParamsInfoRef.validate(async valid => {
				if(!valid) return
				// 预校验成功，发送请求
				const {data: res} = await this.$http.put(`categories/${this.editParamsInfo.cat_id}/attributes/${
					this.editParamsInfo.attr_id
				}`,{
					attr_name:this.editParamsInfo.attr_name,
					attr_sel:this.activeName
				})
				if(res.meta.status !== 200){
					return this.$message.error('参数信息修改失败')
				}
				this.editParamsDialogVisible = false
				this.$message.success('参数信息修改成功')
				this.getParamsData()
			})
		},
		// 监听点击删除事件
		async deleteParams(id){
		 const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
			}).catch(err => err)
			if(confirmResult !== 'confirm'){
				return this.$message('已取消删除')
				}
				const {data: res} = await this.$http.delete(`categories/${this.cateId}/attributes/${id}`)
				if(res.meta.status !== 200){
					return this.$message.error('属性删除失败')
				}
				this.$message.success('属性删除成功')
				this.getParamsData()

		},
		// 文本框失去焦点或者摁下enter键触发的事件
		async handleInputConfirm(row){
			row.inputVisible = false
			// 判断输入框是否是空格
			if(row.inputValue.trim().length === 0){
				// 清除文本框内容
				row.inputValue = '',
				row.inputVisible = false
				return
			}
			// 不为空，把内容添加到数组中
			row.attr_vals.push(row.inputValue.trim())
			// 隐藏文本框
			row.inputVisible = false
			// 调用操作attr_vals事件
			this.saveAttrVals(row)
			// 清除文本框内容
			row.inputValue = ''
		},
		// 将对attr_vals的操作保存到数据库(tag显示)
		async saveAttrVals(row){
			const {data: res} = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{
				attr_name:row.attr_name,
				attr_sel:row.attr_sel,
				attr_vals:row.attr_vals.join()
			})
			console.log(res);
			if(res.meta.status !== 200){
				return this.$message.error('修改参数项失败')
			}
			this.$message.success('修改参数成功')
		},
		// 点击按钮触发的事件
		showInput(row){
			row.inputVisible = true
			// 点击时显示输入框同时输入框自动获取焦点
			// $nextTick的作用就是当页面上元素被重新渲染之后，才会执行调用函数中的代码
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		// 删除对应参数的可选项（tag）
		handleClose(index,row){
			// 删除相应的tag对应的内容
			row.attr_vals.splice(index,1)
			// 调用attr_vals的操作事件，更新tag
			this.saveAttrVals(row)
		}
	},
	computed:{
		// 控制添加按钮可点击事件，不是三级分类不可点击
		isBtnDisabled(){
			if(this.selectedKeys.length !== 3){
				return true
			}else{
				return false
			}
		},
		// 获取分类的id，即selectedKeys的第三个元素
		cateId(){
			if(this.selectedKeys.length === 3){
				return this.selectedKeys[2]
			}
		},
		// 动态计算标题的文本
		titleText(){
			if(this.activeName === 'many'){
				return '动态参数'
			}else{
				return '静态属性'
			}
		}
	}
}
</script>

<style lang="less" scoped>
	.mgtop{
		margin: 15px 0;
	}
	.el-tag{
		margin-right: 15px;
	}
	.input-new-tag{
		width: 100px;
	}
</style>